<template>
  <div ref="page">
    <div class="item">
      <div class="title">面谈方式</div>
      <a-space direction="vertical" size="large" style="margin: 16px 0 0 16px">
        <a-radio-group v-model="formData.interviewType">
          <a-radio :value="1">一对一面谈</a-radio>
          <a-radio :value="2">小组面谈</a-radio>
          <a-radio :value="3">会议面谈</a-radio>
        </a-radio-group>
      </a-space>
    </div>
    <div class="item">
      <div class="title">面谈问题记录</div>
      <a-table
        :columns="columns"
        :data="formData.performanceInterviewRecordTemplateItem"
        :pagination="false"
      >
        <template #index="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
        <template #optional="{ record, rowIndex }">
          <a-tooltip content="编辑">
            <IconFont
              type="icon-edit"
              :size="26"
              :style="{
                marginRight: '10px',
                cursor: 'pointer'
              }"
              @click="edit(record, rowIndex)"
            />
          </a-tooltip>
          <a-tooltip content="删除" position="left">
            <a-popconfirm content="是否确认删除该条数据?" @ok="del(rowIndex)">
              <icon-font
                type="icon-delete"
                :size="26"
                :style="{
                  cursor: 'pointer',
                  marginRight: '10px'
                }"
              />
            </a-popconfirm>
          </a-tooltip>
        </template>
      </a-table>
      <a-button type="text" @click="addInterviewItem">新增面谈项目</a-button>
    </div>
    <div
      class="item"
      v-for="item in formData.performanceInterviewRecordTemplateQuestion"
      :key="item.id"
    >
      <div class="title">
        <a-input
          v-if="item.isInput"
          v-focus
          v-model="item.name"
          style="width: 230px"
          @blur="item.isInput = !item.isInput"
        />
        <span v-else>
          {{ item.name }}
          <icon-edit
            style="color: #88b0fd; cursor: pointer"
            @click="item.isInput = !item.isInput"
          />
        </span>
      </div>
      <a-textarea placeholder="" disabled />
    </div>
    <a-space class="wrapper" direction="vertical" fill>
      <a-button
        :size="'large'"
        type="primary"
        long
        @click="addInterviewQuestion"
        >新增面谈问题</a-button
      >
    </a-space>
    <AddInterviewModal
      v-model:visible="interviewVisible"
      v-model:data="interviewData"
      @add="addInteview"
    />
  </div>
</template>

<script setup lang="ts">
import type {
  Interview,
  PerformanceInterviewRecordTemplateItem
} from '@/apis/management/performance/baseSetting/assessmentSetting/type';
import { useVModel } from '@vueuse/core';
import AddInterviewModal from './AddInterviewModal.vue';
import { cloneDeep } from 'lodash';

const props = withDefaults(
  defineProps<{
    data: Interview;
  }>(),
  {}
);
const emit = defineEmits(['update:data', 'goBottom']);
const formData = useVModel(props, 'data', emit);
const columns = ref<any>([
  {
    title: '序号',
    dataIndex: '',
    slotName: 'index'
  },
  {
    title: '面谈项目',
    dataIndex: 'name'
  },
  {
    title: '面谈内容',
    dataIndex: 'note'
  },
  {
    title: '操作',
    dataIndex: 'optional',
    slotName: 'optional',
    width: 200
  }
]);
const interviewVisible = ref(false);
const interviewData = ref<PerformanceInterviewRecordTemplateItem>({});
const editIndex = ref(-1);
const addInterviewItem = () => {
  editIndex.value = -1;
  interviewData.value = { name: '' };
  interviewVisible.value = true;
};
const addInteview = () => {
  if (!Array.isArray(formData.value.performanceInterviewRecordTemplateItem))
    formData.value.performanceInterviewRecordTemplateItem = [];
  if (editIndex.value < 0) {
    formData.value.performanceInterviewRecordTemplateItem.push(
      interviewData.value
    );
  } else {
    formData.value.performanceInterviewRecordTemplateItem[editIndex.value] =
      interviewData.value;
  }
};
const edit = (data: PerformanceInterviewRecordTemplateItem, index: number) => {
  editIndex.value = index;
  interviewData.value = cloneDeep(data);
  interviewVisible.value = true;
};
const del = (index: number) => {
  if (!formData.value.performanceInterviewRecordTemplateItem) return;
  formData.value.performanceInterviewRecordTemplateItem.splice(index, 1);
};
const page = ref();
const addInterviewQuestion = () => {
  if (!formData.value.performanceInterviewRecordTemplateQuestion)
    formData.value.performanceInterviewRecordTemplateQuestion = [];
  const name = `面谈问题${
    formData.value.performanceInterviewRecordTemplateQuestion.length + 1
  }`;
  formData.value.performanceInterviewRecordTemplateQuestion.push({ name });
  emit('goBottom');
};
</script>
<style lang="less" scoped>
.item {
  margin-bottom: 36px;
  .title {
    font-weight: 600;
    font-size: 14px;
    background: #f5f7fb;
    padding: 5px 0;
    margin-bottom: 10px;
    &::before {
      content: '';
      margin: 0 5px;
      display: inline-block;
      width: 3px;
      height: 12px;
      border-left: #409efe solid 1px;
      background: #409efe;
    }
  }
}
</style>
